<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { message } from 'ant-design-vue'

// 猫咪状态
const cat = ref({
  name: '',
  type: '', // 猫咪类型
  hunger: 80, // 饥饿度 0-100
  thirst: 80, // 口渴度 0-100
  cleanliness: 80, // 清洁度 0-100
  happiness: 80, // 心情 0-100
  intimacy: 50, // 亲密度 0-100
  lastUpdate: Date.now() // 上次更新时间
})

// 初始化状态
const isInitialized = ref(false)
const showSetup = ref(false)
const showAbandonConfirm = ref(false)

// 设置表单数据
const setupForm = ref({
  catName: '',
  selectedCatType: ''
})

// 可选择的猫咪类型
const catTypes = [
  {
    id: 'orange',
    name: '橘猫',
    image: '/src/assets/catImages/橘猫.svg',
    description: '活泼可爱的橘色小猫'
  },
  {
    id: 'gray',
    name: '大灰猫',
    image: '/src/assets/catImages/大灰猫.svg',
    description: '温顺优雅的灰色小猫'
  },
  {
    id: 'black',
    name: '黑猫',
    image: '/src/assets/catImages/黑猫.svg',
    description: '神秘聪明的黑色小猫'
  },
  {
    id: 'white',
    name: '白猫',
    image: '/src/assets/catImages/白猫.svg',
    description: '纯洁温柔的白色小猫'
  },
  {
    id: 'flower',
    name: '花猫',
    image: '/src/assets/catImages/花猫.svg',
    description: '花纹美丽的小花猫'
  },
  {
    id: 'lucky',
    name: '招财猫',
    image: '/src/assets/catImages/招财猫.svg',
    description: '招财进宝的幸运猫'
  }
]

// 互动记录
const interactionLogs = ref([
  { time: '09:36', text: '和Nox玩耍 〈 饥饿-7、口渴-4、清洁-7、心情+19、亲密+10 〉' },
  { time: '09:36', text: '给Nox洗澡 〈 饥饿-6、清洁+20、心情+3、亲密+2 〉' },
  { time: '09:36', text: '给Nox加了水 〈 口渴+20、心情+3、亲密+5 〉' }
])

// 温馨提示消息
const messages = [
  '你再陪我久一点嘛~',
  '喵~ 人家想和你玩',
  '主人，我好想你啊',
  '今天也要开心哦',
  '陪陪我好不好',
  '我等你很久了呢'
]

const currentMessage = ref('你再陪我久一点嘛~')

// 检查是否已初始化
const checkInitialization = () => {
  const savedCat = localStorage.getItem('virtualCat')
  
  if (savedCat) {
    try {
      const parsedCat = JSON.parse(savedCat)
      if (parsedCat.name && parsedCat.type) {
        isInitialized.value = true
        loadCatData()
        return true
      }
    } catch (e) {
      console.error('Failed to parse saved cat data', e)
    }
  }
  
  isInitialized.value = false
  showSetup.value = true
  return false
}

// 从本地存储加载猫咪数据
const loadCatData = () => {
  const savedCat = localStorage.getItem('virtualCat')
  const savedLogs = localStorage.getItem('virtualCatLogs')
  
  if (savedCat) {
    try {
      const parsedCat = JSON.parse(savedCat)
      cat.value = { ...parsedCat }
      
      // 计算离线时间的状态变化
      const now = Date.now()
      const timeDiff = now - cat.value.lastUpdate
      const hoursPassed = timeDiff / (1000 * 60 * 60)
      
      // 每小时各项属性的变化
      if (hoursPassed > 0.1) { // 超过6分钟才计算变化
        cat.value.hunger = Math.max(0, cat.value.hunger - 3 * hoursPassed)
        cat.value.thirst = Math.max(0, cat.value.thirst - 4 * hoursPassed)
        cat.value.cleanliness = Math.max(0, cat.value.cleanliness - 2 * hoursPassed)
        cat.value.happiness = Math.max(0, cat.value.happiness - 2 * hoursPassed)
      }
      
      cat.value.lastUpdate = now
      saveCatData()
    } catch (e) {
      console.error('Failed to load cat data', e)
    }
  }
  
  if (savedLogs) {
    try {
      interactionLogs.value = JSON.parse(savedLogs)
    } catch (e) {
      console.error('Failed to load logs', e)
    }
  }
}

// 保存猫咪数据到本地存储
const saveCatData = () => {
  cat.value.lastUpdate = Date.now()
  localStorage.setItem('virtualCat', JSON.stringify(cat.value))
  localStorage.setItem('virtualCatLogs', JSON.stringify(interactionLogs.value))
}

// 完成初始设置
const completeSetup = () => {
  if (!setupForm.value.catName.trim()) {
    message.error('请输入猫咪的名字！')
    return
  }
  
  if (!setupForm.value.selectedCatType) {
    message.error('请选择一只猫咪！')
    return
  }
  
  // 设置猫咪信息
  cat.value.name = setupForm.value.catName.trim()
  cat.value.type = setupForm.value.selectedCatType
  cat.value.lastUpdate = Date.now()
  
  // 清空互动记录，开始新的生活
  interactionLogs.value = []
  
  // 保存数据
  saveCatData()
  
  // 更新状态
  isInitialized.value = true
  showSetup.value = false
  
  console.log('🎉 猫咪初始化完成！', {
    name: cat.value.name,
    type: cat.value.type,
    stats: {
      hunger: cat.value.hunger,
      thirst: cat.value.thirst,
      cleanliness: cat.value.cleanliness,
      happiness: cat.value.happiness,
      intimacy: cat.value.intimacy
    }
  })
  
  message.success(`欢迎来到${cat.value.name}的世界！`)
}

// 选择猫咪类型
const selectCatType = (catType) => {
  setupForm.value.selectedCatType = catType.id
}

// 获取当前选中的猫咪信息
const selectedCat = computed(() => {
  return catTypes.find(ct => ct.id === setupForm.value.selectedCatType)
})

// 获取当前猫咪的图片
const currentCatImage = computed(() => {
  const catType = catTypes.find(ct => ct.id === cat.value.type)
  return catType ? catType.image : '/src/assets/catImages/橘猫.svg'
})

// 显示弃养确认
const showAbandonDialog = () => {
  showAbandonConfirm.value = true
}

// 取消弃养
const cancelAbandon = () => {
  showAbandonConfirm.value = false
}

// 确认弃养
const confirmAbandon = () => {
  console.log(`😢 ${cat.value.name} 被弃养了...`)
  
  // 清空所有数据
  localStorage.removeItem('virtualCat')
  localStorage.removeItem('virtualCatLogs')
  
  // 重置状态
  cat.value = {
    name: '',
    type: '',
    hunger: 80,
    thirst: 80,
    cleanliness: 80,
    happiness: 80,
    intimacy: 50,
    lastUpdate: Date.now()
  }
  
  // 重置表单
  setupForm.value = {
    catName: '',
    selectedCatType: ''
  }
  
  // 清空互动记录
  interactionLogs.value = []
  
  // 显示设置界面
  isInitialized.value = false
  showSetup.value = true
  showAbandonConfirm.value = false
  
  message.success('已重置，您可以重新选择猫咪')
  console.log('🔄 系统已重置，等待重新选择猫咪')
}

// 猫咪心情状态
const catMood = computed(() => {
  const avgMood = (cat.value.happiness + cat.value.hunger + cat.value.thirst + cat.value.cleanliness) / 4
  const mood = avgMood > 80 ? 'happy' : avgMood > 50 ? 'normal' : 'sad'
  
  // 当心情发生变化时打印日志
  const currentTime = Date.now()
  if (!catMood._lastLogTime || currentTime - catMood._lastLogTime > 1000) {
    console.log('😸 心情状态更新：', {
      mood: mood,
      avgMood: Math.round(avgMood),
      stats: {
        hunger: Math.round(cat.value.hunger),
        thirst: Math.round(cat.value.thirst),
        cleanliness: Math.round(cat.value.cleanliness),
        happiness: Math.round(cat.value.happiness),
        intimacy: Math.round(cat.value.intimacy)
      }
    })
    catMood._lastLogTime = currentTime
  }
  
  return mood
})

// 猫咪嘴巴表情
const moodMouth = computed(() => {
  const avgMood = (cat.value.happiness + cat.value.hunger + cat.value.thirst + cat.value.cleanliness) / 4
  if (avgMood > 80) return 'happy-mouth'
  if (avgMood > 50) return 'normal-mouth'
  return 'sad-mouth'
})

// 添加互动记录
const addLog = (action, changes) => {
  const now = new Date()
  const time = now.toTimeString().slice(0, 5)
  const changeText = Object.entries(changes)
    .map(([key, value]) => {
      const names = {
        hunger: '饥饿',
        thirst: '口渴',
        cleanliness: '清洁',
        happiness: '心情',
        intimacy: '亲密'
      }
      return `${names[key]}${value > 0 ? '+' : ''}${value}`
    })
    .join('、')
  
  const logText = `${action} 〈 ${changeText} 〉`
  interactionLogs.value.unshift({ time, text: logText })
  
  // 只保留最新的10条记录
  if (interactionLogs.value.length > 10) {
    interactionLogs.value = interactionLogs.value.slice(0, 10)
  }
}

// 猫咪互动功能
const feed = () => {
  if (cat.value.hunger >= 100) {
    console.log('🍽️ 喂食失败：Nox已经饱了！')
    return
  }
  
  const oldStats = { ...cat.value }
  const changes = {
    hunger: 20,
    happiness: 5,
    intimacy: 3
  }
  
  cat.value.hunger = Math.min(100, cat.value.hunger + changes.hunger)
  cat.value.happiness = Math.min(100, cat.value.happiness + changes.happiness)
  cat.value.intimacy = Math.min(100, cat.value.intimacy + changes.intimacy)
  
  console.log('🍽️ 喂食成功！', {
    action: '喂食',
    changes: changes,
    before: {
      hunger: Math.round(oldStats.hunger),
      happiness: Math.round(oldStats.happiness),
      intimacy: Math.round(oldStats.intimacy)
    },
    after: {
      hunger: Math.round(cat.value.hunger),
      happiness: Math.round(cat.value.happiness),
      intimacy: Math.round(cat.value.intimacy)
    }
  })
  
  addLog('喂食', changes)
  message.success(`喂食成功！${cat.value.name}吃得很开心~`)
  updateMessage()
  saveCatData()
}

const giveWater = () => {
  if (cat.value.thirst >= 100) {
    console.log('💧 加水失败：Nox不渴了！')
    return
  }
  
  const oldStats = { ...cat.value }
  const changes = {
    thirst: 25,
    happiness: 3,
    intimacy: 2
  }
  
  cat.value.thirst = Math.min(100, cat.value.thirst + changes.thirst)
  cat.value.happiness = Math.min(100, cat.value.happiness + changes.happiness)
  cat.value.intimacy = Math.min(100, cat.value.intimacy + changes.intimacy)
  
  console.log('💧 加水成功！', {
    action: '加水',
    changes: changes,
    before: {
      thirst: Math.round(oldStats.thirst),
      happiness: Math.round(oldStats.happiness),
      intimacy: Math.round(oldStats.intimacy)
    },
    after: {
      thirst: Math.round(cat.value.thirst),
      happiness: Math.round(cat.value.happiness),
      intimacy: Math.round(cat.value.intimacy)
    }
  })
  
  addLog(`给${cat.value.name}加了水`, changes)
  message.success(`${cat.value.name}喝水了，很满足的样子~`)
  updateMessage()
  saveCatData()
}

const clean = () => {
  if (cat.value.cleanliness >= 100) {
    console.log('🛁 洗澡失败：Nox已经很干净了！')
    return
  }
  
  const oldStats = { ...cat.value }
  const changes = {
    cleanliness: 30,
    happiness: 8,
    intimacy: 5,
    hunger: -5
  }
  
  cat.value.cleanliness = Math.min(100, cat.value.cleanliness + changes.cleanliness)
  cat.value.happiness = Math.min(100, cat.value.happiness + changes.happiness)
  cat.value.intimacy = Math.min(100, cat.value.intimacy + changes.intimacy)
  cat.value.hunger = Math.max(0, cat.value.hunger + changes.hunger)
  
  console.log('🛁 洗澡成功！', {
    action: '洗澡',
    changes: changes,
    before: {
      cleanliness: Math.round(oldStats.cleanliness),
      happiness: Math.round(oldStats.happiness),
      intimacy: Math.round(oldStats.intimacy),
      hunger: Math.round(oldStats.hunger)
    },
    after: {
      cleanliness: Math.round(cat.value.cleanliness),
      happiness: Math.round(cat.value.happiness),
      intimacy: Math.round(cat.value.intimacy),
      hunger: Math.round(cat.value.hunger)
    }
  })
  
  addLog(`给${cat.value.name}洗澡`, changes)
  message.success(`洗澡完毕！${cat.value.name}变得香香的~`)
  updateMessage()
  saveCatData()
}

const play = () => {
  if (cat.value.happiness >= 100) {
    console.log('🎾 逗弄失败：Nox已经很开心了！')
    return
  }
  
  const oldStats = { ...cat.value }
  const changes = {
    happiness: 15,
    intimacy: 8,
    hunger: -8,
    thirst: -5,
    cleanliness: -6
  }
  
  cat.value.happiness = Math.min(100, cat.value.happiness + changes.happiness)
  cat.value.intimacy = Math.min(100, cat.value.intimacy + changes.intimacy)
  cat.value.hunger = Math.max(0, cat.value.hunger + changes.hunger)
  cat.value.thirst = Math.max(0, cat.value.thirst + changes.thirst)
  cat.value.cleanliness = Math.max(0, cat.value.cleanliness + changes.cleanliness)
  
  console.log('🎾 逗弄成功！', {
    action: '逗弄',
    changes: changes,
    before: {
      happiness: Math.round(oldStats.happiness),
      intimacy: Math.round(oldStats.intimacy),
      hunger: Math.round(oldStats.hunger),
      thirst: Math.round(oldStats.thirst),
      cleanliness: Math.round(oldStats.cleanliness)
    },
    after: {
      happiness: Math.round(cat.value.happiness),
      intimacy: Math.round(cat.value.intimacy),
      hunger: Math.round(cat.value.hunger),
      thirst: Math.round(cat.value.thirst),
      cleanliness: Math.round(cat.value.cleanliness)
    }
  })
  
  addLog(`和${cat.value.name}玩耍`, changes)
  message.success(`玩耍时间！${cat.value.name}玩得很开心~`)
  updateMessage()
  saveCatData()
}

// 更新消息
const updateMessage = () => {
  const newMessage = messages[Math.floor(Math.random() * messages.length)]
  if (newMessage !== currentMessage.value) {
    console.log('💬 Nox说：', newMessage)
    currentMessage.value = newMessage
  }
}

// 自动保存和状态更新
let saveInterval = null
let messageInterval = null

onMounted(() => {
  console.log('🐱 虚拟猫系统启动！')
  
  // 检查是否已初始化
  if (checkInitialization()) {
    console.log('📊 当前猫咪状态：', {
      name: cat.value.name,
      type: cat.value.type,
      hunger: Math.round(cat.value.hunger),
      thirst: Math.round(cat.value.thirst),
      cleanliness: Math.round(cat.value.cleanliness),
      happiness: Math.round(cat.value.happiness),
      intimacy: Math.round(cat.value.intimacy)
    })
  } else {
    console.log('🎯 需要初始化设置')
  }
  
  // 每分钟自动保存一次并更新状态
  saveInterval = setInterval(() => {
    const oldStats = { ...cat.value }
    
    cat.value.hunger = Math.max(0, cat.value.hunger - 0.5)
    cat.value.thirst = Math.max(0, cat.value.thirst - 0.8)
    cat.value.cleanliness = Math.max(0, cat.value.cleanliness - 0.3)
    cat.value.happiness = Math.max(0, cat.value.happiness - 0.3)
    
    console.log('⏰ 自动状态衰减：', {
      changes: {
        hunger: -0.5,
        thirst: -0.8,
        cleanliness: -0.3,
        happiness: -0.3
      },
      before: {
        hunger: Math.round(oldStats.hunger),
        thirst: Math.round(oldStats.thirst),
        cleanliness: Math.round(oldStats.cleanliness),
        happiness: Math.round(oldStats.happiness)
      },
      after: {
        hunger: Math.round(cat.value.hunger),
        thirst: Math.round(cat.value.thirst),
        cleanliness: Math.round(cat.value.cleanliness),
        happiness: Math.round(cat.value.happiness)
      }
    })
    
    saveCatData()
  }, 60000)
  
  // 每30秒更换一次消息
  messageInterval = setInterval(() => {
    updateMessage()
  }, 30000)
})

onUnmounted(() => {
  if (saveInterval) {
    clearInterval(saveInterval)
  }
  if (messageInterval) {
    clearInterval(messageInterval)
  }
  saveCatData()
})
</script>

<template>
  <div class="virtual-cat">
    <!-- 初始设置界面 -->
    <div v-if="showSetup" class="setup-screen">
      <div class="setup-card">
        <h1 class="setup-title">欢迎来到虚拟猫咪世界！</h1>
        <p class="setup-subtitle">请选择一只可爱的猫咪并给它起个名字吧~</p>
        
        <!-- 猫咪选择 -->
        <div class="cat-selection">
          <h3 class="selection-title">选择你的猫咪</h3>
          <div class="cat-grid">
            <div 
              v-for="catType in catTypes" 
              :key="catType.id"
              class="cat-option"
              :class="{ 'selected': setupForm.selectedCatType === catType.id }"
              @click="selectCatType(catType)"
            >
              <img :src="catType.image" :alt="catType.name" class="cat-option-image" />
              <div class="cat-option-info">
                <h4 class="cat-option-name">{{ catType.name }}</h4>
                <p class="cat-option-desc">{{ catType.description }}</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 名字输入 -->
        <div class="name-input-section">
          <h3 class="selection-title">给猫咪起个名字</h3>
          <div class="name-input-container">
            <input 
              v-model="setupForm.catName"
              type="text" 
              placeholder="输入猫咪的名字..."
              class="name-input"
              maxlength="10"
              @keyup.enter="completeSetup"
            />
          </div>
        </div>
        
        <!-- 预览和完成按钮 -->
        <div class="setup-preview" v-if="selectedCat && setupForm.catName">
          <div class="preview-info">
            <img :src="selectedCat.image" alt="预览" class="preview-image" />
            <div class="preview-text">
              <h4>{{ setupForm.catName }}</h4>
              <p>{{ selectedCat.description }}</p>
            </div>
          </div>
        </div>
        
        <button 
          class="complete-setup-btn"
          @click="completeSetup"
          :disabled="!setupForm.catName.trim() || !setupForm.selectedCatType"
        >
          开始养猫咪！
        </button>
      </div>
    </div>

    <!-- 猫咪卡片 -->
    <div v-else class="cat-card">
      <h1 class="cat-title">养一只虚拟猫猫</h1>
      
      <!-- 猫咪头像区域 -->
      <div class="cat-avatar-container">
        <div class="cat-avatar">
          <div class="current-cat" :class="catMood">
            <!-- 当前猫咪 -->
            <img :src="currentCatImage" :alt="cat.name" class="cat-image" />
          </div>
        </div>
      </div>
      
      <!-- 猫咪名字 -->
      <div class="cat-name">{{ cat.name }}</div>
      
      <!-- 温馨提示 -->
      <div class="cat-message">{{ currentMessage }}</div>
      
      <!-- 属性展示 -->
      <div class="cat-stats">
        <div class="stats-grid">
          <div class="stat-item">
            <div class="pixel-icon hunger-icon"></div>
            <span class="stat-label">饥饿</span>
            <span class="stat-value">{{ Math.round(cat.hunger) }}</span>
          </div>
          <div class="stat-item">
            <div class="pixel-icon thirst-icon"></div>
            <span class="stat-label">口渴</span>
            <span class="stat-value">{{ Math.round(cat.thirst) }}</span>
          </div>
          <div class="stat-item">
            <div class="pixel-icon clean-icon"></div>
            <span class="stat-label">清洁</span>
            <span class="stat-value">{{ Math.round(cat.cleanliness) }}</span>
          </div>
          <div class="stat-item">
            <div class="pixel-icon happy-icon"></div>
            <span class="stat-label">心情</span>
            <span class="stat-value">{{ Math.round(cat.happiness) }}</span>
          </div>
          <div class="stat-item">
            <div class="pixel-icon love-icon"></div>
            <span class="stat-label">亲密</span>
            <span class="stat-value">{{ Math.round(cat.intimacy) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="cat-actions">
        <button class="action-btn" @click="feed" :disabled="cat.hunger >= 100">喂食</button>
        <button class="action-btn" @click="giveWater" :disabled="cat.thirst >= 100">加水</button>
        <button class="action-btn" @click="clean" :disabled="cat.cleanliness >= 100">洗澡</button>
        <button class="action-btn" @click="play" :disabled="cat.happiness >= 100">逗弄</button>
      </div>
    </div>
    
    <!-- 互动记录 -->
    <div v-if="!showSetup" class="interaction-log">
      <h3 class="log-title">互动记录</h3>
      <div class="log-content">
        <div v-for="(log, index) in interactionLogs" :key="index" class="log-item">
          <span class="log-time">[{{ log.time }}]</span>
          <span class="log-text">{{ log.text }}</span>
        </div>
        <div v-if="interactionLogs.length === 0" class="log-empty">
          还没有互动记录呢，快来和{{ cat.name }}玩耍吧！
        </div>
      </div>
    </div>

    <!-- 弃养按钮 -->
    <div v-if="!showSetup" class="abandon-section">
      <button class="abandon-btn" @click="showAbandonDialog">弃养</button>
    </div>

    <!-- 弃养确认弹窗 -->
    <div v-if="showAbandonConfirm" class="abandon-modal">
      <div class="abandon-overlay" @click="cancelAbandon"></div>
      <div class="abandon-dialog">
        <div class="abandon-header">
          <h3 class="abandon-title">确认弃养</h3>
        </div>
        <div class="abandon-content">
          <div class="abandon-cat-info">
            <img :src="currentCatImage" :alt="cat.name" class="abandon-cat-image" />
            <div class="abandon-cat-details">
              <h4>{{ cat.name }}</h4>
              <p>亲密度: {{ Math.round(cat.intimacy) }}</p>
            </div>
          </div>
          <p class="abandon-warning">
            ⚠️ 弃养后将清除所有数据，包括互动记录和猫咪状态。
            <br>
            您确定要弃养 <strong>{{ cat.name }}</strong> 吗？
          </p>
        </div>
        <div class="abandon-actions">
          <button class="cancel-abandon-btn" @click="cancelAbandon">取消</button>
          <button class="confirm-abandon-btn" @click="confirmAbandon">确认弃养</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.virtual-cat {
  width: 100%;
  max-width: 500px;
  max-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #fce7f3 0%, #f3e8ff 50%, #e0e7ff 100%);
  overflow: hidden;
  box-sizing: border-box;
  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
  border-radius: 20px;
}

/* 设置界面样式 */
.setup-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.setup-card {
  background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(236, 72, 153, 0.2);
  border: 2px solid #fce7f3;
  max-width: 400px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.setup-title {
  font-size: 24px;
  color: #be185d;
  text-align: center;
  margin-bottom: 8px;
  font-weight: 700;
}

.setup-subtitle {
  font-size: 14px;
  color: #9ca3af;
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.5;
}

.selection-title {
  font-size: 16px;
  color: #be185d;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}

.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.cat-option {
  border: 2px solid #f3e8ff;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fefbff;
  text-align: center;
}

.cat-option:hover {
  border-color: #f9a8d4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 114, 182, 0.2);
}

.cat-option.selected {
  border-color: #ec4899;
  background: linear-gradient(135deg, #fce7f3 0%, #f3e8ff 100%);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.cat-option-image {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 8px;
}

.cat-option-name {
  font-size: 12px;
  font-weight: 600;
  color: #be185d;
  margin-bottom: 4px;
}

.cat-option-desc {
  font-size: 10px;
  color: #6b7280;
  line-height: 1.3;
}

.name-input-section {
  margin-bottom: 20px;
}

.name-input-container {
  display: flex;
  justify-content: center;
}

.name-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #f3e8ff;
  border-radius: 12px;
  font-size: 14px;
  color: #374151;
  background: #fefbff;
  transition: all 0.3s ease;
  text-align: center;
  font-family: inherit;
}

.name-input:focus {
  outline: none;
  border-color: #ec4899;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.setup-preview {
  background: linear-gradient(135deg, #fce7f3 0%, #f3e8ff 100%);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  border: 2px solid #f9a8d4;
}

.preview-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.preview-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.preview-text h4 {
  font-size: 16px;
  color: #be185d;
  font-weight: 600;
  margin-bottom: 4px;
}

.preview-text p {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.3;
}

.complete-setup-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.complete-setup-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
}

.complete-setup-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 猫咪卡片 */
.cat-card {
  background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.15);
  border: 2px solid #fce7f3;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.cat-title {
  font-size: 18px;
  color: #be185d;
  margin-bottom: 10px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(190, 24, 93, 0.1);
  flex-shrink: 0;
}

/* 猫咪头像 */
.cat-avatar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.cat-avatar {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #fce7f3 0%, #f9a8d4 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(244, 114, 182, 0.3);
  border: 2px solid #f9a8d4;
}

/* 当前猫咪样式 */
.current-cat {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.current-cat.happy {
  transform: scale(1.05);
}

.current-cat.normal {
  transform: scale(1.0);
}

.current-cat.sad {
  transform: scale(0.95);
  opacity: 0.9;
}

.cat-image {
  border-radius: 6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  width: 60px;
  height: 60px;
  object-fit: contain;
}



/* 猫咪名字 */
.cat-name {
  font-size: 20px;
  font-weight: 700;
  color: #be185d;
  margin-bottom: 6px;
  text-shadow: 0 2px 4px rgba(190, 24, 93, 0.2);
  flex-shrink: 0;
}

/* 温馨提示 */
.cat-message {
  background: linear-gradient(135deg, #fce7f3 0%, #f3e8ff 100%);
  color: #be185d;
  padding: 6px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 12px;
  border: 2px dashed #f9a8d4;
  font-weight: 500;
  flex-shrink: 0;
}

/* 属性展示 */
.cat-stats {
  margin-bottom: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px 12px;
  justify-items: center;
  align-items: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* 像素风状态图标 */
.pixel-icon {
  width: 16px;
  height: 16px;
  margin-bottom: 4px;
  image-rendering: pixelated;
}

/* 饥饿图标 - 肉骨头 */
.hunger-icon {
  background: 
    linear-gradient(90deg, transparent 2px, #8b4513 2px, #8b4513 4px, transparent 4px, transparent 8px, #8b4513 8px, #8b4513 10px, transparent 10px, transparent 12px, #8b4513 12px, #8b4513 14px, transparent 14px),
    linear-gradient(0deg, transparent 4px, #d2691e 4px, #d2691e 12px, transparent 12px);
}

/* 口渴图标 - 水滴 */
.thirst-icon {
  background:
    linear-gradient(90deg, transparent 6px, #4a90e2 6px, #4a90e2 10px, transparent 10px),
    linear-gradient(0deg, transparent 2px, #4a90e2 2px, #4a90e2 4px, transparent 4px, transparent 12px, #4a90e2 12px, #4a90e2 14px, transparent 14px),
    linear-gradient(0deg, transparent 4px, #87ceeb 4px, #87ceeb 12px, transparent 12px);
}

/* 清洁图标 - 肥皂泡 */
.clean-icon {
  background:
    radial-gradient(circle at 4px 4px, #ffffff 2px, transparent 2px),
    radial-gradient(circle at 12px 12px, #ffffff 2px, transparent 2px),
    radial-gradient(circle at 8px 8px, #87ceeb 3px, transparent 3px);
}

/* 心情图标 - 爱心 */
.happy-icon {
  background:
    linear-gradient(90deg, transparent 2px, #ff69b4 2px, #ff69b4 6px, transparent 6px, transparent 10px, #ff69b4 10px, #ff69b4 14px, transparent 14px),
    linear-gradient(0deg, transparent 4px, #ff69b4 4px, #ff69b4 12px, transparent 12px),
    linear-gradient(0deg, transparent 6px, #ff1493 6px, #ff1493 10px, transparent 10px);
}

/* 亲密图标 - 星星 */
.love-icon {
  background:
    linear-gradient(90deg, transparent 6px, #ffd700 6px, #ffd700 10px, transparent 10px),
    linear-gradient(0deg, transparent 6px, #ffd700 6px, #ffd700 10px, transparent 10px),
    linear-gradient(45deg, transparent 4px, #ffd700 4px, #ffd700 6px, transparent 6px, transparent 10px, #ffd700 10px, #ffd700 12px, transparent 12px),
    linear-gradient(-45deg, transparent 4px, #ffd700 4px, #ffd700 6px, transparent 6px, transparent 10px, #ffd700 10px, #ffd700 12px, transparent 12px);
}

.stat-label {
  font-size: 12px;
  color: #be185d;
  font-weight: 500;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

/* 操作按钮 */
.cat-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.action-btn {
  background: #f472b6;
  color: white;
  border: 2px solid #be185d;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow: 2px 2px 0px #be185d;
  min-width: 70px;
}

.action-btn:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #be185d;
  background: #ec4899;
}

.action-btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #be185d;
}

.action-btn:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
}

/* 弃养按钮区域 */
.abandon-section {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-radius: 12px;
  border: 1px solid #fecaca;
  padding: 12px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.abandon-btn {
  background: #ef4444;
  color: white;
  border: 2px solid #dc2626;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow: 2px 2px 0px #dc2626;
  min-width: 60px;
}

.abandon-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #dc2626;
  background: #dc2626;
}

.abandon-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #dc2626;
}

/* 弃养确认弹窗 */
.abandon-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
}

.abandon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.abandon-dialog {
  background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%);
  border-radius: 16px;
  border: 2px solid #fce7f3;
  box-shadow: 0 12px 40px rgba(239, 68, 68, 0.3);
  max-width: 350px;
  width: 90%;
  position: relative;
  z-index: 1001;
  overflow: hidden;
}

.abandon-header {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  padding: 16px;
  border-bottom: 2px solid #fecaca;
}

.abandon-title {
  font-size: 18px;
  font-weight: 700;
  color: #dc2626;
  text-align: center;
  margin: 0;
}

.abandon-content {
  padding: 20px;
}

.abandon-cat-info {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fce7f3 0%, #f3e8ff 100%);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  border: 2px solid #f9a8d4;
}

.abandon-cat-image {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 8px;
}

.abandon-cat-details h4 {
  font-size: 16px;
  font-weight: 600;
  color: #be185d;
  margin: 0 0 4px 0;
}

.abandon-cat-details p {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

.abandon-warning {
  font-size: 13px;
  color: #dc2626;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  background: #fef2f2;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #fecaca;
}

.abandon-warning strong {
  color: #991b1b;
  font-weight: 700;
}

.abandon-actions {
  padding: 16px 20px;
  background: #fafafa;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.cancel-abandon-btn,
.confirm-abandon-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  max-width: 120px;
}

.cancel-abandon-btn {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.cancel-abandon-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.confirm-abandon-btn {
  background: #ef4444;
  color: white;
  border: 1px solid #dc2626;
}

.confirm-abandon-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

/* 互动记录 */
.interaction-log {
  background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%);
  border-radius: 16px;
  padding: 12px;
  border: 2px solid #fce7f3;
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.1);
  height: 180px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.log-title {
  text-align: center;
  font-size: 16px;
  color: #be185d;
  margin-bottom: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.log-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  text-align: left;
}

.log-item {
  padding: 6px 10px;
  margin-bottom: 6px;
  background: #fef7ff;
  border-radius: 8px;
  border-left: 3px solid #f472b6;
  font-size: 12px;
  line-height: 1.3;
}

.log-time {
  color: #be185d;
  font-weight: 600;
  margin-right: 8px;
}

.log-text {
  color: #374151;
}

.log-empty {
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .virtual-cat {
    padding: 8px;
    gap: 8px;
  }
  
  .cat-card {
    padding: 16px 12px;
  }
  
  .cat-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .cat-name {
    font-size: 20px;
    margin-bottom: 6px;
  }
  
  .cat-message {
    padding: 6px 12px;
    font-size: 12px;
    margin-bottom: 12px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px 8px;
  }
  
  .stat-label {
    font-size: 11px;
  }
  
  .stat-value {
    font-size: 18px;
  }
  
  .action-btn {
    padding: 8px 12px;
    font-size: 12px;
    min-width: 60px;
  }
  
  .abandon-btn {
    padding: 6px 12px;
    font-size: 11px;
    min-width: 50px;
  }
  
  .cat-avatar {
    width: 80px;
    height: 80px;
  }
  
  .current-cat {
    width: 60px;
    height: 60px;
  }
  
  .pixel-icon {
    width: 14px;
    height: 14px;
  }
  
  .interaction-log {
    height: 120px;
    min-height: 100px;
    padding: 8px;
  }
  
  .log-title {
    font-size: 14px;
    margin-bottom: 8px;
  }
}
</style> 